<template>
  <div class="coopDiv">
    <ul class="tabUl">
      <li :class="{'active':currentTab == 0}" @click="handelCurrentTab(0)">个人认证<b></b></li>
      <li :class="{'active':currentTab == 1}" @click="handelCurrentTab(1)">公司认证<b></b></li>
    </ul>
    <div>
      <person-item v-if="currentTab===0"></person-item>
      <company-item v-if="currentTab===1"></company-item>
    </div>
  </div>
</template>
<script>
  import companyItem from '@/components/user-cooperation/company-item'
  import personItem from '@/components/user-cooperation/person-item'
  export default {
    components:{
      companyItem,personItem
    },
    data() {
      return {
        currentTab: 0,
      }
    }, 
    onShow(){
    },
    methods: { 
      handelCurrentTab (tab){ //tab切换
        this.currentTab = tab;
      },
    }
  }
</script>

<style scoped>
.coopDiv{
  width: 100%;
  min-height: 100%;
  position: absolute;
  overflow: hidden;
}
.coopDiv .tabUl{
  width: 100%;
  height: 90rpx;
  background: #fafafa;
  display: flex;
}
.coopDiv .tabUl li{
  height: 90rpx;
  color: #d2d2d2;
  flex: 1;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.coopDiv .tabUl li.active{
  color: #000;
}
.coopDiv .tabUl li.active b{
  width: 125rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background: #e1c7d2;
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -62rpx;
}
</style>
